<template>
  <div class="store-add-update-component">
    <el-dialog
      v-if="modelValue.visible"
      v-model="modelValue.visible"
      :title="
        !modelValue.form.id
          ? `新增${modelValue.title}`
          : `修改${modelValue.title}`
      "
      width="750px"
    >
      <div style="padding-right: 50px; padding-top: 20px">
        <el-form
          :model="modelValue.form"
          :rules="modelValue.rules"
          ref="addEditRef"
          :label-width="100"
        >
          <div class="form-item">
            <el-form-item label="门店编码" prop="number">
              <el-input
                placeholder="请输入编码"
                v-model="modelValue.form.number"
                autocomplete="off"
                style="width: 220px"
                :disabled="!!modelValue.form.id"
              />
            </el-form-item>
            <el-form-item label="外门店编号" prop="outStoreNumber">
              <el-input
                placeholder="请输入外门店编号"
                v-model="modelValue.form.outStoreNumber"
                autocomplete="off"
                style="width: 220px"
              />
            </el-form-item>
          </div>
          <div class="form-item">
            <el-form-item label="门店名称" prop="name">
              <el-input
                placeholder="请输入门店名称"
                v-model="modelValue.form.name"
                autocomplete="off"
                style="width: 220px"
              />
            </el-form-item>
            <el-form-item label="门店类型" prop="storeCategoryId">
              <el-select
                style="width: 220px"
                v-model="modelValue.form.storeCategoryId"
                placeholder="选择门店类型"
              >
                <el-option
                  v-for="option in modelValue.storeCategoryList"
                  :key="option.id"
                  :label="option.name"
                  :value="option.id"
                />
              </el-select>
            </el-form-item>
          </div>
          <div class="form-item">
            <el-form-item label="门店区域" prop="storeGroupId">
              <el-select
                style="width: 220px"
                v-model="modelValue.form.storeGroupId"
                placeholder="选择门店区域"
              >
                <el-option
                  v-for="option in modelValue.storeGroupList"
                  :key="option.id"
                  :label="option.name"
                  :value="option.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="门店拥有人" prop="userId">
              <el-select
                style="width: 220px"
                v-model="modelValue.form.userId"
                placeholder="选择门店拥有人"
              >
                <el-option
                  v-for="option in modelValue.userList"
                  :key="option.id"
                  :label="option.nickName"
                  :value="option.id"
                />
              </el-select>
            </el-form-item>
          </div>
          <div class="form-item">
            <el-form-item label="省市区" prop="provinceId">
              <el-cascader
                style="width: 220px"
                v-model="modelValue.form.provincecityarea"
                :options="areaOptions"
                :props="cascaderProps"
                placeholder="请选择省市区"
                @change="handleAreaChange"
              />
            </el-form-item>
            <el-form-item label="状态" prop="enabled">
              <el-select
                style="width: 220px"
                v-model="modelValue.form.enabled"
                placeholder="选择状态"
              >
                <el-option
                  v-for="option in statusOptions"
                  :key="option.id"
                  :label="option.name"
                  :value="option.id"
                />
              </el-select>
            </el-form-item>
          </div>
          <el-form-item label="详细地址" prop="address">
            <el-input
              placeholder="请输入详细地址"
              v-model="modelValue.form.address"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="备注" prop="mark">
            <el-input
              placeholder="请输入备注"
              v-model="modelValue.form.mark"
              type="textarea"
              :rows="3"
              autocomplete="off"
            />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="ensure"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage, FormInstance } from 'element-plus'
import { addStore, updateStore } from '@/api/tms-store.api'
import { regionData } from 'element-china-area-data'
import { statusOptions } from '@/utils/common.utils'

const props = defineProps(['modelValue'])
const addEditRef = ref<FormInstance>()

const selectedArea = ref([])
const areaOptions = ref(regionData)

const cascaderProps = {
  value: 'value',
  label: 'label',
  children: 'children',
}

const handleAreaChange = (value: any) => {
  if (value.length === 3) {
    const [provinceCode, cityCode, areaCode] = value
    //获取省的名称
    let provinceItem = regionData.find((item) => {
      return item.value == provinceCode
    })

    let cityItem = undefined
    if (provinceItem) {
      let children = provinceItem.children || []
      cityItem = children.find((item) => {
        return item.value == cityCode
      })
    }

    let areaItem = undefined
    if (cityItem) {
      let children = cityItem.children || []
      areaItem = children.find((item) => {
        return item.value == areaCode
      })
    }

    provinceItem = provinceItem || {}
    cityItem = cityItem || {}
    areaItem = areaItem || {}

    console.log(
      '选中区域码:',
      provinceItem.label,
      cityItem.label,
      areaItem.label
    )
    props.modelValue.form.provinceId = provinceCode
    props.modelValue.form.provinceName = provinceItem.label
    props.modelValue.form.cityId = cityCode
    props.modelValue.form.cityName = cityItem.label
    props.modelValue.form.areaId = areaCode
    props.modelValue.form.areaName = areaItem.label
  }
}

/***
 * 确认弹框
 */
const ensure = () => {
  let form = props.modelValue.form
  let formData = {
    name: form.name,
    number: form.number,
    storeGroupId: form.storeGroupId,
    storeGroupName: form.storeGroupName,
    storeCategoryId: form.storeCategoryId,
    storeCategoryName: form.storeCategoryName,
    enabled: form.enabled,
    shortName: form.shortName,
    mark: form.mark,
    outStoreNumber: form.outStoreNumber,
    provinceId: form.provinceId,
    provinceName: form.provinceName,
    cityId: form.cityId,
    cityName: form.cityName,
    areaId: form.areaId,
    areaName: form.areaName,
    address: form.address,
    userId: form.userId,
  }

  if (!addEditRef.value) return
  addEditRef.value.validate((valid, fields) => {
    if (valid) {
      if (form.id) {
        updateStore({
          ...formData,
          id: form.id,
        })
          .then((res) => {
            cancel()
            ElMessage({
              message: props.modelValue.title + '修改成功',
              type: 'success',
            })
            if (props.modelValue.refreshDataList) {
              props.modelValue.refreshDataList()
            }
          })
          .catch((err) => {
            ElMessage({
              message: err.msg || err,
              type: 'error',
            })
          })
        return
      }

      addStore(formData)
        .then((res) => {
          cancel()
          ElMessage({
            message: props.modelValue.title + '新增成功',
            type: 'success',
          })
          if (props.modelValue.refreshDataList) {
            props.modelValue.refreshDataList()
          }
        })
        .catch((err) => {
          ElMessage({
            message: err.msg || err,
            type: 'error',
          })
        })
    }
  })
}

/***
 * 取消弹框
 */
const cancel = () => {
  props.modelValue.visible = false
}
</script>
<style lang="scss" scoped>
.form-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
